<template>
  <div class="content-box" :class="{ 'nobottom-btn': !showbtn }">
    <!-- <div class="box-title">
      <img :src="getPicAssetURL(images)" />
      <span>{{ title }}</span>
    </div> -->
    <div class="box-main">
      <el-collapse v-model="state.activeNames" @change="handleChange" accordion>
        <el-collapse-item v-for="(item, index) in state.colData" :key="index" :name="index + 1">
          <template #title>
            <div class="title-item">
              <img :src="getPicAssetURL('u21.png')" />
              <span class="title-color">{{ item.titleName }}</span>
            </div>
          </template>
          <ul>
            <li
              :class="['item-li', currentLi === index ? 'active' : '']"
              :key="index"
              v-for="(item, index) in item.detailArr"
              @click="clickLi(item, index)"
            >
              <el-tooltip
                :content="item.title"
                placement="bottom"
                :disabled="item.title?.length < 12"
              >
                <span>{{ item.title }}</span>
              </el-tooltip>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- <div class="box-btn" v-show="showbtn" @click="handleAdd(item, index)">
      <div class="btn-box">
        <span>{{ btnName }}</span>
      </div>
    </div> -->
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getPicAssetURL } from '@/utils/loadAssets'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  dataList: {
    type: Object,
    default: () => ({})
  },
  images: {
    type: String,
    default: ''
  },
  btnName: {
    type: String,
    default: ''
  },
  showbtn: {
    type: Boolean,
    default: true
  },
  showList: {
    type: Boolean,
    default: true
  }
})
const currentLi = ref(null)

const state = reactive({
  activeNames: 1,
  colData: [
    // {
    //   titleName: "雨水情",
    //   detailArr: [{ title: "实时雨情" }, { title: "实时水情" }],
    // },
    {
      titleName: '水文预报',
      detailArr: [
        { title: '实测预报降雨' },
        { title: '典型场次' },
        { title: '智能降雨' },
        // { title: '设计暴雨' },
        { title: '模拟降雨' }
      ]
    },
    {
      titleName: '预报调度',
      detailArr: [{ title: '工程调度' }]
    }
    // {
    //   titleName: '滚动预报',
    //   detailArr: [{ title: '滚动预报' }]
    // }
  ]
})
const emit = defineEmits(['clickLi'], ['handleAdd'])
const clickLi = (item, index) => {
  currentLi.value = index
  emit('clickLi', item)
}
onMounted(() => {
  clickLi(state.colData[0].detailArr[0], 0)
})
const handleAdd = (item, index) => {
  emit('handleAdd', item)
}
function handleChange(item) {
  if (item == 1) {
    clickLi(state.colData[0].detailArr[0], 0)
  } else if (item == 2) {
    clickLi(state.colData[1].detailArr[0], 0)
  }
}
function defineChecked() {
  // currentLi.value = 0
}
defineExpose({ clickLi, defineChecked })
</script>
<style lang="less" scoped>
.content-box {
  background-color: rgba(27, 50, 103, 0.9);

  height: 320px;
  width: 245px;
  border: 1px solid #149bd5;
  .box-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #149bd5;
    height: 34px;
    box-sizing: border-box;
    // background: white;
    opacity: 0.8;
    img {
      position: absolute;
      left: 10px;
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
    span {
      color: #0154db;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .box-main::-webkit-scrollbar {
    display: none;
  }
  .box-main {
    box-sizing: border-box;
    // background: rgba(255, 255, 255, 0.7);
    height: 100%;
    padding: 0 10px;
    overflow-y: auto;
    :deep(.el-collapse-item__header) {
      background-color: transparent !important;
      border: none;
    }
    :deep(.el-collapse-item__wrap) {
      background-color: transparent !important;
      // border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    :deep(.el-collapse) {
      border: none;
      .el-icon {
        font-size: 14px;
        color: #149bd5;
      }

      .el-collapse-item__content {
        height: 100%;
        padding-bottom: 0px;
      }
      // .el-collapse-item__content:hover {
      //   background-color: rgb(203, 230, 243);
      // }
    }
    // :deep(.el-collapse-item__header) {
    //   background: rgba(255, 255, 255, 0.2) !important;
    // }
    // :deep(.el-collapse-item__wrap) {
    //   background: rgba(255, 255, 255, 0.2) !important;
    // }
    .title-item {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      width: 100%;

      .title-color {
        color: #37a4dc;
        font-size: 15px;
        // font-weight: bold;
        // width: 100%;
        text-align: center;
        // margin-left: -20px;

        // color: #41abe2;
        // font-size: 18px;
        // margin-left: 40px;
        // margin-left: -100px;
      }

      // height: 35px;
      img {
        // position: absolute;
        // left: 10px;
        width: 20px;
        height: 20px;
        margin-right: 20px;
      }
    }
    ul {
      height: 100%;
      overflow-y: auto;
      font-size: 14px;
      .item-li {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 35px;
        cursor: pointer;
        span:nth-of-type(1) {
          max-width: 250px; //也可以设置最大宽度
          overflow: hidden; //溢出隐藏
          white-space: nowrap; // 强制一行显示
          text-overflow: ellipsis; // 显示。。。省略号
        }
        span {
          color: white;
        }
      }
      .item-li.active {
        span {
          color: #00d3e9;
          // font-size: 16px;
        }
      }
      .item-li:hover {
        background-color: rgb(170, 170, 170);
      }
    }
  }
  .box-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 14px;
    background: rgba(22, 155, 213, 1);
    cursor: pointer;
    span {
      color: white;
    }
  }
}
// .nobottom-btn {
//   .box-main {
//     height: calc(100% - 35px);
//   }
// }
</style>
